import Draggable from 'vuedraggable'

export default {
    components: { Draggable },
    methods: {
        onDragAdd(evt) {
            const prentRender = this.element.render
            const { newIndex, oldIndex } = evt
            const dragItem = this.element.elements[newIndex]
            if (!dragItem) {
                console.info('异常拖动',newIndex, oldIndex)
                return
            }
            const { label, render, props, style, mapper, elements, events, level, visible  } = dragItem
            //为拖拽到容器的元素添加唯一 key
            const key = this.$Util.uuid()
            const component = {
                label, render, key, level,
                visible: visible || true,
                props: props || {},
                style: style || {},
                events: events|| [],
                mapper: mapper || this.$Util.uuid(6),
                elements: elements || [],
                prentRender: prentRender
            }
            this.$LabRender.autoFill(component, this)
            const defineItem = this.$LabRender.find(render)
            if (defineItem) {
                component.level = level
                if (defineItem.level > 1) {
                    component.sm = 24;component.lg=24
                    if (component.render === 'tab') {
                        for (let i = 0; i < 2; i++) {
                            component.elements.push(this.$LabRender.create('tabPane', `标签-${i}`,component.render))
                        }
                    } else if (component.render === 'buttonGroup') {
                        component.elements.push(this.$LabRender.create('button', '按钮1',component.render))
                        component.elements.push(this.$LabRender.create('button', '按钮2',component.render))
                    } /*else if (component.render === 'formTable') {
                        const topGroup = this.$LabRender.create('buttonGroup', '表格上方',component.render);
                        topGroup.elements.push(this.$LabRender.create('button', '新增',component.render))
                        component.elements.push(topGroup)
                        const table = this.$LabRender.create('table', '表格',component.render);
                        const rowGroup = this.$LabRender.create('buttonGroup', '操作',component.render);
                        rowGroup.elements.push(this.$LabRender.create('button', '编辑',component.render))
                        rowGroup.elements.push(this.$LabRender.create('button', '删除',component.render))
                        table.elements.push(rowGroup);
                        component.elements.push(table)
                    }*/
                }
            }
            this.$set(this.element.elements, newIndex, component)
        }
    }

}
